<script setup lang="ts">
import {Box, ChatRound, User} from "@element-plus/icons-vue";

defineProps({
  size: {
    type: Number,
    default: 20
  },
  color: {
    type: String,
    default: "#409eff"
  }
});
</script>
<template>
  <el-aside class="el-aside-one">
    <div class="el-aside-one-icon">
      <el-avatar  :size="size+10" shape="square" :src="'/avatar/001.png'" style="cursor: pointer;margin-top: 20px" />
      <el-icon :size="size" :color="color" style="cursor: pointer;margin-top: 20px">
        <ChatRound/>
      </el-icon>
<!--      <el-icon :size="size" :color="color" style="cursor: pointer">-->
<!--        <User/>-->
<!--      </el-icon>-->
<!--      <el-icon :size="size" :color="color" style="cursor: pointer">-->
<!--        <Box/>-->
<!--      </el-icon>-->
    </div>
  </el-aside>
</template>
<style scoped>
.el-aside-one {
  width: 60px;
  height: 100%;
  background-color: #ccc !important;
}
.el-aside-one-icon {
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
</style>